<template>

  <div class="shopsDetail">
    <el-row>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/schemas' }">方案列表</el-breadcrumb-item>

        <el-breadcrumb-item v-if="vm.isEdit">查看方案 #{{id}}</el-breadcrumb-item>
        <el-breadcrumb-item v-else>获取方案错误</el-breadcrumb-item>

      </el-breadcrumb>

    </el-row>
    <div class="content">
      <h2>{{vm.threadMan.name}} {{vm.threadMan.phone}}</h2>
      <h3>店铺:{{shop_name}} </h3>
      <h3>销售顾问:{{sales_name}} {{sales_phone}}</h3>
      <h3>申请时间: {{vm.submit_time}}</h3>
      <!--<p>-->
      <!--销售顾问:张小凡 销售电话:xxxxx-->
      <!--</p>-->
      <!--<el-steps :active="active" finish-status="success">-->
      <!--<el-step title="填写信息">-->
      <!---->
      <!--</el-step>-->
      <!--<el-step title="确定"></el-step>-->
      <!--<el-step title="送审中"></el-step>-->
      <!--</el-steps>-->


      <el-table
        :data="vm.vehicle"
        border
        style="width: 100%">
        <template slot="empty">
          <div class="mt-loading"><i class="el-icon-loading"></i>
          </div>
        </template>


        <el-table-column

          prop="logo"
          width="120"
          align="center"
        >
          <template slot-scope="scope">

            <div><img class="item-img" width="60px" :src="scope.row.logo" alt=""></div>

          </template>
        </el-table-column>

        <el-table-column

          prop="model_name"
          label="目标车型">

        </el-table-column>
        <el-table-column

          prop="model_price"
          label="厂商指导价"
          width="120">

        </el-table-column>
        <el-table-column

          prop="market_price"
          label="市场综合价"
          width="120">

        </el-table-column>
        <el-table-column

          prop="retainage_of_evaluation"
          label="1年后残值"
          width="120">

        </el-table-column>


      </el-table>

      <el-table
        :data="vm.custom"
        border
        style="width: 100%">
        <template slot="empty">
          <div class="mt-loading"><i class="el-icon-loading"></i>
          </div>
        </template>


        <el-table-column

          prop="name"
          label="客户真名"
          width="120">

        </el-table-column>

        <el-table-column

          prop="phone"
          label="客户电话"
          width="200">

        </el-table-column>
        <el-table-column

          prop="id_card_no"
          label="身份证号">

        </el-table-column>
        <el-table-column

          prop="bank_card_no"
          label="银行卡号"
          width="120">

        </el-table-column>
        <el-table-column

          prop="id_card_photo"
          label="身份证照"
          width="120">
          <template slot-scope="scope">
            <a :href="scope.row.id_card_photo" target="_blank">
              <img class="item-img" :src="scope.row.id_card_photo">
            </a>
          </template>
        </el-table-column>
        <el-table-column

          prop="driver_license_photo"
          label="驾驶证照"
          width="120">
          <template slot-scope="scope">
            <a :href="scope.row.driver_license_photo" target="_blank">
              <img class="item-img" :src="scope.row.driver_license_photo">
            </a>
          </template>
        </el-table-column>
        <el-table-column

          prop="bank_card_photo"
          label="银行卡照片"
          width="120">
          <template slot-scope="scope">
            <a :href="scope.row.bank_card_photo" target="_blank">
              <img class="item-img" :src="scope.row.bank_card_photo">
            </a>
          </template>
        </el-table-column>


      </el-table>
      <h1>方案信息</h1>
      <el-form ref="form" :model="form" label-width="140px" style="margin-top: 20px;padding: 40px;background: #f9f9f9">
        <el-row :gutter="12">
          <el-col :span="8">
            <el-form-item label="采购行情价">

              <el-input disabled v-model="form.schema.market_price"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="12">
          <el-col :span="8">

            <el-form-item label="经销商发票类型">

              <el-input disabled v-model="form.schema.invoice_type"></el-input>
            </el-form-item>
            <el-form-item label="最终落户票">

              <el-input disabled v-model="form.schema.settled_invoice_price"></el-input>
            </el-form-item>

            <el-form-item label="裸车价校验(g)">

              <el-input disabled v-model="form.schema.vehicle_price_validate"></el-input>
            </el-form-item>


          </el-col>
          <el-col :span="8">
            <!--<el-form-item label="最终落户发票价">-->

            <!--<el-input disabled v-model="form.schema.invoice_price"></el-input>-->
            <!--</el-form-item>-->
            <el-form-item label="开票金额">

              <el-input disabled v-model="form.schema.invoice_price"></el-input>
            </el-form-item>

            <el-form-item label="加融利润">

              <el-input disabled v-model="form.schema.profit_financing"></el-input>
            </el-form-item>
            <el-form-item label="可提高金额(g)">

              <el-input disabled v-model="form.schema.vehicle_price_add_space"></el-input>
            </el-form-item>
            <!--<el-form-item label="差额税费(r)">-->

            <!--<el-input disabled v-model="form.schema.invoice_tax_diff"></el-input>-->
            <!--</el-form-item>-->

          </el-col>
        </el-row>

        <el-row :gutter="12" style="margin-top: 20px">
          <el-col :span="8">
            <el-form-item label="运输费">

              <el-input disabled v-model="form.schema.freight"></el-input>
            </el-form-item>
            <el-form-item label="附加配置">

              <el-input disabled v-model="form.schema.decoration"></el-input>
            </el-form-item>
            <el-form-item label="购置税">

              <el-input disabled v-model="form.schema.purchase_tax"></el-input>
            </el-form-item>
            <el-form-item label="车船税">

              <el-input disabled v-model="form.schema.vav_tax"></el-input>
            </el-form-item>
            <el-form-item label="保险校验(g)" class="el-form-item el-form-item--feedback is-success">

              <el-input disabled v-model="form.schema.insurance_validate"></el-input>
            </el-form-item>


          </el-col>
          <el-col :span="8">
            <el-form-item label="发票">

              <el-input disabled v-model="form.schema.freight_invoice"></el-input>
            </el-form-item>
            <el-form-item label="发票">

              <el-input disabled v-model="form.schema.decoration_invoice"></el-input>
            </el-form-item>
            <el-form-item label="交强险">

              <el-input disabled v-model="form.schema.strong_insurance"></el-input>
            </el-form-item>
            <el-form-item label="商业险">

              <el-input disabled v-model="form.schema.commercial_insurance"></el-input>
            </el-form-item>
            <el-form-item label="可提高金额(g)">

              <el-input disabled v-model="form.schema.insurance_diff"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="12" style="margin-top: 20px">
          <el-col :span="8">

            <el-form-item label="采购附加费加融">

              <el-input disabled v-model="form.schema.buying_saling_fee_addition"></el-input>
            </el-form-item>
            <el-form-item label="运营成本费加融">

              <el-input disabled v-model="form.schema.decoration"></el-input>
            </el-form-item>
            <el-form-item label="加融校验(R)">

              <el-input disabled v-model="form.schema.financing_validate"></el-input>
            </el-form-item>


          </el-col>
          <el-col :span="8">

            <el-form-item label="其他附加费加融">

              <el-input disabled v-model="form.schema.other_fee_addition"></el-input>
            </el-form-item>
            <el-form-item label="进销税费成本加融">

              <el-input disabled v-model="form.schema.buying_selling_tax"></el-input>
            </el-form-item>
            <el-form-item label="可提高金额">

              <el-input disabled v-model="form.schema.financing_diff"></el-input>
            </el-form-item>

          </el-col>
        </el-row>



      </el-form>
      <h1>方案调整</h1>
      <!--//   upstream_invoice_type => invoice_type-->
      <!--//   invoice_price => x-->
      <!--//   upstream_invoice_price => invoice_price-->
      <!--//   sales_price => x-->
      <!--//   freight_invoice => 0-->
      <!--//   decoration_invoice => 0-->
      <!--//	invoice_validate => x-->
      <!--// invoice_tax_diff => x-->
      <!--// etc_fee => 0-->
      <!--//   + settled_invoice_price-->
      <el-form ref="form" :model="validate" label-width="140px"
               style="margin-top: 20px;padding: 40px;background: #f9f9f9">
        <el-row :gutter="12" style="margin-top: 20px">

          <el-col :span="8">

            <el-form-item label="首付" prop="checkPass">

              <el-input disabled v-model="form.schema.first_payment"></el-input>
            </el-form-item>


          </el-col>
          <el-col :span="8">
            <el-form-item label="首付比例">

              <el-input disabled v-model="proportional"></el-input>
            </el-form-item>



          </el-col>
        </el-row>
        <el-row :gutter="12">
          <el-col :span="8">

            <el-form-item label="首年月供">

              <el-input disabled v-model="form.schema.month_supply_1st_year"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="尾款">

              <el-input disabled v-model="form.schema.retainage"></el-input>
            </el-form-item>
          </el-col>


        </el-row>

        <el-row :gutter="12">
          <el-col :span="8">
            <el-form-item label="毛利润">

              <el-input disabled v-model="form.schema.gross_profit"></el-input>
            </el-form-item>

          </el-col>

          <el-col :span="8">

            <el-form-item label="新增加融">

              <el-input disabled v-model="form.schema.financing_addition"></el-input>
            </el-form-item>
          </el-col>


        </el-row>
        <!--新增加融-->
        <!--<el-row :gutter="12">-->
        <!---->
        <!--<el-col :span="8">-->
        <!--<el-button @click="financing_plus">+10</el-button>-->
        <!--<el-button @click="financing_minus">-10</el-button>-->
        <!--</el-col>-->


        <!--</el-row>-->

        <el-row :gutter="12" style="margin-top: 20px">
          <el-col :span="8">

            <el-form-item label="新增加融校验">

              <el-input disabled v-model="form.schema.financing_addition_validate"></el-input>
            </el-form-item>


          </el-col>
          <el-col :span="8">

            <el-form-item label="可提高金额">

              <el-input disabled v-model="form.schema.financing_addition_diff"></el-input>
            </el-form-item>


          </el-col>
        </el-row>

        <!--<el-row :gutter="12" style="margin-top: 20px">-->
        <!--<el-col :span="8">-->

        <!--<el-form-item label="新增加融校验">-->

        <!--<el-input disabled v-model="form.schema.financing_addition_validate"></el-input>-->
        <!--</el-form-item>-->


        <!--</el-col>-->
        <!--<el-col :span="8">-->

        <!--<el-form-item label="可提高金额">-->

        <!--<el-input v-model="form.schema.financing_addition_diff"></el-input>-->
        <!--</el-form-item>-->


        <!--</el-col>-->
        <!--</el-row>-->
        <el-row :gutter="12" style="margin-top: 20px">
          <el-col :span="8">

            <el-form-item label="加融限制内融资额">

              <el-input disabled v-model="form.schema.total_financing_price_in_limit"></el-input>
            </el-form-item>


          </el-col>
          <el-col :span="8">

            <el-form-item label="超限额后融资总额">

              <el-input disabled v-model="form.schema.need_financing_price"></el-input>
            </el-form-item>


          </el-col>
        </el-row>


      </el-form>


    </div>

  </div>
</template>

<script>
  import * as Schemas from '@/api/schemas'
  import * as Customs from '@/api/customs'

  function toPercent(point) {
    var str = Number(point * 100).toFixed(1);
    str += "%";
    return str;
  }

  export default {
    computed: {
      proportional: function () {

        return toPercent(this.form.schema.first_payment / this.form.schema.market_price)
      }
    },

    data() {
      return {
        vm: {
          isEdit: false,
          schema: [],
          vehicle: [],
          threadMan: {name: '', phone: ''},
          staff: {name: '', phone: ''},
          custom: [],
          isLoading: false,
          isError: false,
          models: [],
          submit_time: '',
          canAudit: false,
          canVerify: true,
          message: '',
          auditLoading: false,
          agreeLoading: true,
          refuseText: '',
          showRefuseText: false

        },
        shop_name: '',
        sales_name: '',
        sales_phone: '',

        validate: {},

        form: {
          schema: {}
        }
      }
    },

    mounted() {
      if (this.$route.params.id > 0) {
        this.vm.isEdit = true;
        this.id = this.$route.params.id;
      }
      this.query();

    },
    methods: {

      refuse() {
        let that = this;
        Schemas.audit({id: that.id, type: 0}).then(function () {
          that.$message({
            type: 'success',
            message: '拒绝审核成功!'
          });
          that.vm.auditLoading = false;
          that.$router.go(-1)

        }).catch(function (err) {
          that.$message({
            type: 'warning',
            message: err
          });
          that.vm.auditLoading = false;

        });

      },
      agree() {

        let that = this;
        that.vm.agreeLoading = true
        Schemas.agree({audit_schema_id: that.id}).then(function () {
          that.$message({
            type: 'success',
            message: '送审成功!'
          });
          that.vm.agreeLoading = false;
          that.$router.go(-1)

        }).catch(function (err) {
          that.$message({
            type: 'warning',
            message: err
          });
          that.vm.agreeLoading = false;

        });

      },
      audit() {
        let that = this;
        that.vm.auditLoading = true;

        Schemas.update(that.form.schema).then(function () {


          Schemas.audit({id: that.id, type: 1}).then(function () {
            that.$message({
              type: 'success',
              message: '已提交审核!'
            });
            that.vm.auditLoading = false;
            that.$router.go(-1)


          }).catch(function (err) {
            that.$message({
              type: 'warning',
              message: err
            });

            that.vm.auditLoading = false;

          });


        });

      },
      verify_pass(datas) {
        let tip = '';

        if (datas.insurance_diff < 0) {
          tip += datas.insurance_validate + "：" + (-datas.insurance_diff) + "\n";
        }
        if (datas.financing_diff < 0) {
          tip += datas.financing_validate + "：" + (-datas.financing_diff) + "\n";
        }
        this.vm.message = tip;
        if (this.vm.message) {
          return false
        } else {
          return true
        }
      },
      financing_plus() {

        this.form.schema.financing_addition = this.form.schema.financing_addition * 1 + 10;
      }
      ,
      financing_minus() {

        this.form.schema.financing_addition = this.form.schema.financing_addition * 1 - 10;
      },
      verify() {
        var that = this;
        that.vm.canVerify = false;
        Schemas.verify(that.form.schema).then(function (res) {
          if (that.verify_pass(res.schema_detail)) {
            Object.keys(res.schema_detail).forEach(function (key) {
              that.form.schema[key] = res.schema_detail[key]
            });
            that.vm.canVerify = true;
            that.vm.canAudit = true;

//            that.audit();

          } else {
//            that.$confirm(that.vm.message,'方案校验',{
//              confirmButtonText: '确定',
//              cancelButtonText: '返回修改'
//            }).then(function(){
////              that.audit();
//              that.vm.canVerify=true;
//
//              that.vm.canAudit=true;
//
//            }).catch(function(){
//              that.vm.canAudit=true;
//              that.vm.canVerify=true;
//
//            });
            that.$alert(that.vm.message, '方案校验', {
              confirmButtonText: '确定',
              callback: function () {
                that.vm.canVerify = true;
                that.vm.canAudit = true;
              }
            });
          }


        });
      },
      onSubmit() {
        console.log('submit!');
      },

      query: function () {
        var that = this;
        Schemas.getIds({id: that.id}).then(function (res) {
          that.vm.submit_time = res.submit_time;
          that.shop_name = res.shop_name;
          that.sales_name = res.sales_name;
          that.sales_phone = res.sales_phone;
//          店铺:{{shop_name}} 销售顾问:{{sales_name}} {{sales_phone}}
          Customs.get({thread_id: res.thread_id}).then(function (data) {
            that.vm.threadMan = data;
          }).then(function () {

          });


          Schemas.get({id: res.schemas_id}).then(function (data) {
            that.vm.schema = [data.schema];
            data.vehicle.retainage_of_evaluation = data.schema.retainage_of_evaluation;
            that.vm.vehicle = [data.vehicle];

            let _form = {
              schema: data.schema
            };

            _form.schema.wxxid = res.wxxid;
            _form.schema.thread_id = res.thread_id;
            _form.schema.schema_id = res.schema_id;
            _form.schema.model_id = data.vehicle.model_id;

            _form.schema.market_price = data.vehicle.market_price;
            _form.schema.model_price = data.vehicle.model_price;

            that.form = _form;
          }).catch(function (err) {
            console.warn(err);
          });
//
          Customs.credit({wxxid: res.wxxid, custom_unionid: res.custom_unionid}).then(function (data) {
            that.vm.custom = [data];
          }).catch(function (err) {
          });


        });


      }


    }


  }
</script>
<style scoped>
  .item-img {
    width: 60px;
    max-width: 60px;
    display: block;
  }
</style>
